﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "首页（上传图片）";
}
<el-col :span="8" :offset="8">
    <el-upload class="upload-demo" drag action="/upload/images" :limit="limit" :on-success="onsuccess"
               :on-error="onerror" :on-change="onchange" :on-progress="onprogress" :multiple="ismultiple" :show-file-list="isshowfilelist">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
            拖曳图片到此处，或
            <em>点击选择图片</em>上传
        </div>
        <div class="el-upload__tip" slot="tip" style="margin-top:15px;"><b>当前版本为体验版</b> 只能上传jpg/png/gif/bmp/webp文件，且不超过4M</div>
    </el-upload>
    <el-progress :text-inside="true" :stroke-width="15" :percentage="upload.percentage" :hidden="progresshd" style='margin:20px auto;'></el-progress>
    <div :hidden="hdprediv">
        <div style="height:80px;overflow:hidden;margin:20px 0 10px 0;">
            <img style="width:100%;" :src="preUrl" />
        </div>
        <el-input readonly v-model="preUrl" id="preUrl">
            <template slot="append">
                <el-button slot="append" icon="el-icon-document" class="btn" data-clipboard-target="#preUrl" @@click="copy()">复制</el-button>
            </template>
        </el-input>
    </div>
</el-col>

@section scripts{
    <script src="~/Scripts/clipboard.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                activeIndex: "1",
                defaultalbum: '默认相册',
                dropalbums: [],
                limit: 10,
                ismultiple: false,
                isshowfilelist: false,
                progresshd: true,
                hdprediv: true,
                preUrl: '',
                upload: {
                    percentage: 0.00
                }
            },
            methods: {
                handleSelect(key, keyPath) {
                    var self = this;
                    skipPage(self, key);
                },
                onsuccess(response, file, fileList) {
                    var self = this;
                    self.progresshd = true;
                    self.upload.percentage = file.percentage;
                    self.preUrl = response.data;
                    console.log(response)
                    if (response.code != 200) {
                        this.$message.error('上传失败：' + response.msg);
                    } else {
                        //let img = new Image();
                        //img.onload = () => {
                        //}
                        self.hdprediv = false;
                        //img.src=
                    }
                },
                onprogress(event, file, fileList) {
                    this.progresshd = false;
                    this.hdprediv = true;
                    //console.log(file.percentage)
                    if (file.percentage == '') {
                        file.percentage = 0;
                    }
                    this.upload.percentage = Number(file.percentage.toFixed(2));
                },
                onerror(err, file, fileList) {
                    this.$message.error('上传失败:' + err);
                },
                onchange(file, fileList) {
                    //console.log(file);
                },
                copy() {
                    var self = this;
                    showMessage(self, '提示：复制功能开发中...', true, 'warning');
                }
            },
            created() {
                var self = this;
                PF.dropdownalbums(self);
            }
        });
    </script>
}
